<template>
  <el-button plain @click="openDiff"> Click to open the diffDialog </el-button>

  <ProModal
    :width="'1200'"
    ref="myModal"
    v-model:visible="dialogVisible"
    :use-type="2"
  >
    <div ref="diffContainer"></div>
  </ProModal>

  <ElButton plain type="primary" @click="openDetail">打开详情弹框</ElButton>
  <ProModal
    :width="'1200'"
    ref="myModal2"
    v-model:visible="show"
    :use-type="2"
    :ifShowOkBtn="false"
  >
    <Description title="基本信息" @register="registerDesc" />
  </ProModal>

  <div class="w-2/4 h-auto mt-4">
    <Description title="基本信息" @register="registerDesc" />
  </div>
</template>
<script setup lang="ts">
import { ElDialog, ElButton } from "element-plus";
import { ref, nextTick, onMounted } from "vue";
import { createTwoFilesPatch } from "diff";
import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui";
import "highlight.js/styles/googlecode.css";
import "diff2html/bundles/css/diff2html.min.css";
import { OutputFormatType, LineMatchingType } from "diff2html/lib/types";
import { ProModal } from "@/components/ProComponents/index";
import { Description, useDescription } from "@/components/Description";
import { detailSchema } from "./detail";

const dialogVisible = ref(false);
const show = ref(false);
const myModal = ref();
const myModal2 = ref();
const info = ref();

// 差异字符串（通常通过diff算法生成）
// 定义两个JSON对象（作为示例）
const obj1 = {
  a: "牛魔王",
  b: 2,
  c: { d: 3 },
  e: "苹果",
  f: "红色",
  g: [1, 2, 3],
  h: true,
  i: "香蕉",
  j: 5,
  k: null,
  l: { m: 10, n: 20 },
  o: "西瓜",
  p: [7, 8, 9],
  q: false,
  r: "桔子",
  s: "莓果",
  t: "青提",
  u: "梨",
  v: 12,
  w: "橙子",
  x: "荔枝",
  y: "龙眼",
  z: "桃子",
  aa: "樱桃",
  ab: "杨梅",
  ac: 30,
  ad: "椰子",
  ae: "榴莲",
  af: "菠萝",
  ag: "哈密瓜",
  ah: "蜜瓜",
  ai: "柚子",
  aj: "石榴",
  ak: "核桃",
  al: "腰果",
  am: "白果",
  an: "榛子",
  ao: "核桃",
};
const obj2 = {
  a: "胡图图",
  b: 3,
  c: { d: 4 },
  e: "橙子",
  f: "蓝色",
  g: [4, 5, 6],
  h: false,
  i: "葡萄",
  j: 10,
  k: undefined,
  l: { m: 15, n: 25 },
  o: "菠萝",
  p: [10, 11, 12],
  q: true,
  r: "柠檬",
  s: "枣",
  t: "火龙果",
  u: "柿子",
  v: 20,
  w: "桂圆",
  x: "杨桃",
  y: "杏",
  z: "无花果",
  aa: "豆角",
  ab: "黄瓜",
  ac: 40,
  ad: "青椒",
  ae: "西红柿",
  af: "鳄梨",
  ag: "开心果",
  ah: "冰糖橙",
  ai: "芭乐",
  aj: "白梨",
  ak: "红枣",
  al: "香瓜",
  am: "苦瓜",
  an: "红辣椒",
  ao: "芜菁",
};

// 将JSON对象转换为字符串进行比较
const text1 = JSON.stringify(obj1, null, 2);
const text2 = JSON.stringify(obj2, null, 2);

const proModal = ref();

const diffContainer = ref<HTMLElement | null>(null);

let configuration = {
  drawFileList: true, // 是否在差异之前显示文件列表
  fileListToggle: false, // 是否允许切换文件列表的显示
  fileListStartVisible: false, // 文件列表是否初始时可见
  // matching: 'lines', // 匹配级别：行
  matching: LineMatchingType.LINES, // 匹配级别：行
  // outputFormat:'side-by-side' as OutputFormatType, // 输出格式：并排显示
  outputFormat: OutputFormatType.SIDE_BY_SIDE, // 输出格式：并排显示
  synchronizedScroll: true, // 同步滚动（并排模式）
  highlight: true, // 是否高亮显示代码
  renderNothingWhenEmpty: false, // 如果没有差异，是否渲染空内容
};

//diff代码比对
const openDiff = () => {
  // proModal.value.openModal();
  dialogVisible.value = true;
  const diffOutput = createTwoFilesPatch(
    "text1.json",
    "text2.json",
    text1,
    text2
  );
  console.log(diffOutput);

  // 初始化diff2htmlUI并配置
  // 创建并绘制diff
  //dom更新之后再执行比较，否则查询不到dom节点 直接报错
  nextTick(() => {
    if (diffContainer.value) {
      let diff2htmlUi = new Diff2HtmlUI(
        diffContainer.value, //渲染节点
        diffOutput, //内容
        configuration //配置项
      );
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    }
  });
};

onMounted(() => {
  info.value = {
    orgName: "测试机构",
    checkOrgName: "测试检查机构",
    address: "测试详细地址",
    checkDate: "2022-01-01",
    name: "测试预约人",
    cardId: "测试身份证号",
    mobile: "1999999999999",
  };
});

const [registerDesc] = useDescription({
  data: info,
  schema: detailSchema,
  column: 2,
  size: "default",
});

const openDetail = () => {
  show.value = true;
};
</script>

<style lang="less" scoped>
//解决左侧序号 不滚动问题
:deep(.d2h-code-side-linenumber) {
  position: relative;
}
</style>
